'use client'

export default function MarketOverview() {
  return (
    <div className="rec-card w-full max-w-6xl mx-auto rounded-2xl p-[16px] shadow-[0_0_20px_rgba(0,0,0,0.3)] text-gray-300">
      {/* 标题 */}
      <h2 className="text-[#9fb7ff] text-sm font-semibold uppercase tracking-wider mb-6">Market Overview</h2>

      {/* 三个指标卡片 */}
      <div className="flex flex-col md:flex-row gap-4 mb-8">
        {[
          {
            title: 'TAM',
            value: '$2.77B',
            subtitle: 'Smart Locks (2023–24 analyst composite)'
          },
          {
            title: 'CAGR',
            value: '18.5%',
            subtitle: 'Smart locks & biometric devices, 2024–2030'
          },
          {
            title: 'SEA Utility Substation Padlocks (Est)',
            value: '1.8M units',
            subtitle: 'Company est.; addressable units proxy'
          }
        ].map((item, i) => (
          <div
            key={i}
            className="flex-1 bg-[#161b26] border-solid border-[#2b3142] rounded-xl p-5 text-left transition-all duration-300 hover:border-[#7C5CFF99] hover:shadow-[0_0_20px_rgba(56,189,248,0.25)]">
            <h3 className="text-[#8ea2c9] text-xs font-semibold uppercase tracking-wider mb-2">{item.title}</h3>
            <p className="text-2xl font-semibold text-white mb-1">{item.value}</p>
            <p className="text-sm text-gray-400">{item.subtitle}</p>
          </div>
        ))}
      </div>

      {/* 分析段落 */}
      <div className="space-y-6">
        {/* Partner Insight */}
        <div>
          <h4 className="text-[#9fb7ff] text-sm font-semibold uppercase tracking-wider mb-2 border-b border-[#2b3142] pb-1">
            Partner Insight
          </h4>
          <p className="text-gray-300 leading-relaxed">
            The absolute smart lock TAM looks modest, but Tapplock's wedge—utility-grade biometric padlocks with audit
            trails—targets high-value workflows where theft/liability and compliance drive willingness-to-pay. If they
            become spec-standard for SEA utilities, the category can expand from padlocks to broader access control.
          </p>
        </div>

        {/* Market Traction */}
        <div>
          <h4 className="text-[#9fb7ff] text-sm font-semibold uppercase tracking-wider mb-2 border-b border-[#2b3142] pb-1">
            Market Traction
          </h4>
          <p className="text-gray-300 leading-relaxed">
            Multi-year TNB path culminating in an initial deployment announcement (May 2024) is compelling; stated
            full-deployment potential of ~$42M hardware + ~$10.8M ARR is attractive but ⚪ unverified beyond company
            materials and local press. Evidence of repeatability outside TNB remains limited.
          </p>
        </div>

        {/* Go-to-Market Strategy */}
        <div>
          <h4 className="text-[#9fb7ff] text-sm font-semibold uppercase tracking-wider mb-2 border-b border-[#2b3142] pb-1">
            Go-To-Market Strategy
          </h4>
          <p className="text-gray-300 leading-relaxed">
            Top-down “whale” motion via utilities and regulators (e.g., CEPSI visibility, MACC/Energy Commission
            briefings) with an emerging SMB playbook targeting 3 scalable verticals. The whale strategy is right for
            utilities; the SMB motion needs data on sales cycles, CAC, and pilot-to-paid conversion to prove
            scalability.
          </p>
        </div>
      </div>
    </div>
  )
}
